<template>
  <div>
    <FormPanel ref="from" :list="formList" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
      <!-- <el-button @click="closeDrawer(2)" type="primary">保 存</el-button> -->
      <multiuse-button type="primary" :click="closeDrawer.bind(this, 2)">保 存</multiuse-button>
    </div>
  </div>
</template>
<script>
import { addSave, getAllbrand, getAllseriess, getAllmodels, getAllpackage, getAlloption, getAllInterior, getAllexterior } from '@/api/omSale/vehicleParameters/vehicleMaterials/index.js';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
export default {
  data() {
    this.saveData = null;
    return {
      formList: this.createdFrom(),
      seriesList: []
    };
  },
  created() {
    this.getList();
  },
  mixins: [dictionary],
  methods: {
    createdFrom() {
      return [
        {
          type: 'SELECT',
          label: '品牌名称',
          fieldName: 'brandId',
          placeholder: '请输入...',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          change: p => {
            if (p) {
              this.formList.map(x => {
                if (x.fieldName == 'seriesId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'modelId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
              this.getSeries(p);
            } else {
              this.formList.map(x => {
                if (x.fieldName == 'seriesId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'modelId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
            }
          }
        },
        {
          type: 'SELECT',
          label: '车系名称',
          fieldName: 'seriesId',
          placeholder: '请输入...',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          itemList: [],
          change: p => {
            if (p) {
              this.formList.map(x => {
                if (x.fieldName == 'modelId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
              this.getModel(p);
            } else {
              this.formList.map(x => {
                if (x.fieldName == 'modelId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
            }
          }
        },
        {
          type: 'SELECT',
          label: '车型名称',
          fieldName: 'modelId',
          placeholder: '请选择...',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          change: p => {
            if (p) {
              this.formList.map(x => {
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
              this.getConfig(p);
            } else {
              this.formList.map(x => {
                if (x.fieldName == 'packageId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
            }
          }
        },
        {
          type: 'SELECT',
          label: '配置名称',
          fieldName: 'packageId',
          placeholder: '请选择..',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          change: p => {
            if (p) {
              this.formList.map(x => {
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
              this.getAlloption(p);
            } else {
              this.formList.map(x => {
                if (x.fieldName == 'optionId') {
                  x.itemList = [];
                  x.initialValue = '';
                }
              });
            }
          }
        },
        {
          type: 'SELECT',
          label: '选装名称',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },

        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'productCode',
          placeholder: '请输入',
          maxlength: 18,
          rules: [
            { required: true, message: '请输入', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                let myReg = /^[a-zA-Z0-9_]{0,}$/;
                if (!myReg.test(value) || value.length != 18) {
                  return callback(new Error('请输入不含有特殊符号或汉字的18位编码'));
                }

                callback();
              },
              trigger: 'blur'
            }
          ]
        },
        {
          type: 'INPUT',
          label: '产品名称',
          fieldName: 'productName',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '年款',
          fieldName: 'yearModel',
          placeholder: '请选择',
          itemList: this.createDictList('6048')
        },
        {
          type: 'SELECT',
          label: '排放标准',
          fieldName: 'dischargeStandard',
          placeholder: '请选择',
          hidden: false,
          itemList: this.createDictList('1510')
        },
        {
          type: 'SELECT',
          label: '变速箱',
          fieldName: 'transMission',
          placeholder: '请选择',
          hidden: false,
          itemList: this.createDictList('6049')
        },
        {
          type: 'SELECT',
          label: '排量',
          fieldName: 'disPlacement',
          placeholder: '请选择',
          hidden: false,
          itemList: this.createDictList('6050')
        },
        {
          type: 'SELECT',
          label: '续航里程',
          fieldName: 'enduranceMileage',
          placeholder: '请选择',
          hidden: false,
          itemList: this.createDictList('6051')
        },
        {
          type: 'INPUT',
          label: '市场指导价',
          fieldName: 'oemDirectivePrice',
          placeholder: '请选择',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '是否可订购',
          fieldName: 'orderStatus',
          placeholder: '请选择',
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '启用标记',
          fieldName: 'isValid',
          placeholder: '请选择',
          initialValue: 10041001,
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '启用日期',
          fieldName: 'startDate',
          placeholder: '请选择',
          dateType: 'exactdate',
          minDateTime: moment().format('YYYY-MM-DD'),
          initialValue: moment().format('YYYY-MM-DD'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '公告号',
          fieldName: 'noticeNo',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        }
      ];
    },
    changeHandle(val) {
      this.saveData = val;
    },
    async getList() {
      let res = await getAllbrand();
      let res1 = await getAllInterior();
      let res2 = await getAllexterior();
      this.formList.find(x => x.fieldName == 'brandId').itemList = res.data.map(x => ({ text: x.brandName, value: x.brandId }));
      this.formList.find(x => x.fieldName == 'colorId').itemList = res2.data.map(x => ({ text: x.colorName, value: x.colorId }));
      this.formList.find(x => x.fieldName == 'trimColorId').itemList = res1.data.map(x => ({ text: x.colorName, value: x.colorId }));
    },
    async getSeries(brandId) {
      let res = await getAllseriess({ brandId: brandId });
      this.seriesList = res.data;
      this.formList.find(x => x.fieldName == 'seriesId').itemList = res.data.map(x => ({ text: x.seriesName, value: x.seriesId }));
    },
    async getConfig(modelId) {
      let str = this.formList.find(x => x.fieldName == 'seriesId').initialValue;
      let strs = this.formList.find(x => x.fieldName == 'brandId').initialValue;
      let res = await getAllpackage({ brandId: strs, seriesId: str, modelId: modelId });
      this.formList.find(x => x.fieldName == 'packageId').itemList = res.data.map(x => ({ text: x.configName, value: x.packageId }));
    },
    async getModel(seriesId) {
      let powerType = '';
      this.seriesList.map(x => {
        if (seriesId == x.seriesId) {
          powerType = x.powerType;
        }
      });

      let str = this.formList.find(x => x.fieldName == 'brandId').initialValue;
      let res = await getAllmodels({ brandId: str, seriesId: seriesId });
      this.formList.find(x => x.fieldName == 'modelId').itemList = res.data.map(x => ({ text: x.modelName, value: x.modelId }));
      this.changeType(powerType);
    },
    async getAlloption(packageId) {
      let str = this.formList.find(x => x.fieldName == 'seriesId').initialValue;
      let strs = this.formList.find(x => x.fieldName == 'brandId').initialValue;
      let stres = this.formList.find(x => x.fieldName == 'modelId').initialValue;
      let res = await getAlloption({ brandId: strs, seriesId: str, modelId: stres, packageId: packageId });
      this.formList.find(x => x.fieldName == 'optionId').itemList = res.data.map(x => ({ text: x.optionName, value: x.optionId }));
    },
    // 动力形式改变表单
    changeType(powerType) {
      if (powerType == 60081001) {
        // 燃油车
        this.formList.find(x => x.fieldName == 'enduranceMileage').hidden = true;
        this.formList.find(x => x.fieldName == 'dischargeStandard').hidden = false;
        this.formList.find(x => x.fieldName == 'transMission').hidden = false;
        this.formList.find(x => x.fieldName == 'disPlacement').hidden = false;
      } else {
        this.formList.find(x => x.fieldName == 'enduranceMileage').hidden = false;
        this.formList.find(x => x.fieldName == 'dischargeStandard').hidden = true;
        this.formList.find(x => x.fieldName == 'transMission').hidden = true;
        this.formList.find(x => x.fieldName == 'disPlacement').hidden = true;
      }
    },
    async closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      } else {
        this.$refs.from.SUBMIT_FORM();
        console.log(this.saveData, 'this.saveData');
        if (this.saveData) {
          let json = JSON.parse(JSON.stringify(this.saveData));
          let res = await addSave(json);
          if (res.resultCode == 200) {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            this.$emit('close', json);
          } else {
            this.saveData = null;
          }
        }
      }
    }
  }
};
</script>
